<template>
  <div class="add-questions">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form ref="form" label-width="80px">
        <el-form-item label="学科">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="目录">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option v-for="item in catalogueList" :key="item.id" :label="item.directoryName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="企业">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option v-for="item in companysList" :key="item.id" :label="item.company" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="城市">
          <el-select v-model="province" class="select" placeholder="请选择">
            <el-option v-for="item in provinceList" :key="item.id" :label="item.city" :value="item.name" />
          </el-select>
          <el-select v-model="form.city" class="select" placeholder="请选择">
            <el-option v-for="(item,index) in areaArr" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="方向">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="o2o" value="o2o" />
            <el-option label="外包服务" value="外包服务" />
            <el-option label="企业服务" value="企业服务" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>

        <el-form-item label="题型">
          <el-radio-group v-model="form.questionType">
            <el-radio label="单选" />
            <el-radio label="多选" />
            <el-radio label="简答" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="难度">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="简单" />
            <el-radio label="一般" />
            <el-radio label="困难" />
          </el-radio-group>
        </el-form-item>

        <div class="wangEditor-box">
          <span>题干</span>
          <!-- <myeditor /> -->
          <div style="border: 1px solid #ccc;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :default-config="toolbarConfig"
              :mode="mode"
            />
            <Editor
              v-model="form.question"
              style="height: 300px; overflow-y: hidden;"
              :default-config="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </div>
      </el-form>
      <!-- 动态渲染 -->
      <el-form ref="form" class="one" label-width="80px">
        <options :addoption="addoption" />

        <div class="button">
          <el-button icon="el-icon-plus" type="danger" size="small" @click="addoptions">增加选项与答案</el-button>
        </div>

        <el-form-item label="解析视频">
          <el-input />
        </el-form-item>

        <div class="wangEditor-box">
          <span>答案解析</span>
          <!-- <myeditor /> -->
          <myeditor />
        </div>

        <el-form-item label="题目备注" prop="desc">
          <el-input type="textarea" class="textarea" />
        </el-form-item>

        <el-form-item label="试题标签">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCatalogueList } from '@/api/subject'
import { getCompanysList } from '@/api/enterprise'
import { City, JN, LC, WH, ZB, QD, HZ, LQ, Jn } from '@/utils/city'

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { toolbarKeys } from './editor'
import myeditor from './myeditor'
import options from './option'

export default {
  components: {
    // myeditor
    Editor, Toolbar, options, myeditor
  },
  data() {
    return {
      editor: null,
      html: '<p>hello</p>',
      // 工具栏配置
      toolbarConfig: { toolbarKeys },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'simple' || 'default', // or 'simple'
      form: {
        region: '',
        resource: '',
        city: '',
        province: '',
        questionType: '单选',
        difficulty: '简单',
        question: ''
      },
      areaArr: [], // 地区二级列表
      province: '',
      provinceList: City, // 地区一级列表
      text: '', // 富文本框文本
      addoption: false, // 添加试题
      subjectList: [], // 科目列表
      catalogueList: [], // 目录列表
      companysList: [] // 企业列表
    }
  },
  watch: {
    province(newval) {
      const obj = {
        'JN': JN,
        'LC': LC,
        'ZB': ZB,
        'WH': WH,
        'QD': QD,
        'HZ': HZ,
        'LQ': LQ,
        'Jn': Jn
      }
      this.areaArr = obj[newval]
      this.form.province = this.province && this.provinceList.find(item => item.name === this.province).city
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  created() {
    this.getSubjectList()
    this.getCatalogueList()
    this.getEnterpriseList()
  },
  methods: {
    onCreated(editor) {
      //   console.log('editor', editor)
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 触发添加选项事件
    addoptions() {
      this.addoption = !this.addoption
    },
    // 获取科目列表
    async getSubjectList() {
      try {
        await this.$store.dispatch('practice/list')
        this.subjectList = this.$store.state.questions.subjectList
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 获取目录结构
    async getCatalogueList() {
      try {
        const res = await getCatalogueList({ page: 1, pagesize: 5000 })
        this.catalogueList = res.items
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 获取企业列表
    async getEnterpriseList() {
      try {
        const res = await getCompanysList({ page: 1, pagesize: 5000 })
        console.log(res)
        this.companysList = res.items
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 21px;
  color: #8c939d;
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 10px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .el-input__inner {
  width: 406px;
  height: 38px;
}

.Special-resources {
  ::v-deep .el-radio {
    display: flex;
    align-items: center;
    justify-content: left;
  }

  ::v-deep .el-radio__label {
    display: flex;
    justify-content: left;
  }
}

.add-questions {
  padding: 10px 10px 0px 0px;

  .box-card {
    padding-bottom: 10px;
  }

  .select {
    margin-right: 10px;

    ::v-deep .el-input__inner {
      width: 198px;
      height: 38px;
    }
  }

  .wangEditor-box {
    width: 80%;
    height: 400px;
    display: flex;
    justify-content: left;

    span {
      width: 50px;
      margin-left: 38px;
      font-size: 14px;
    }
  }
}

.one {
  margin-top: 10px;
  padding-left: 30px;
  .button{
    padding-left: 82px;
    margin-bottom: 20px;
  }
  .wangEditor-box{
    margin-bottom: 20px;
    span{
      margin: 0;
      width: 80px;
    }
  }
  .textarea{
    width: 500px;
  }
  ::v-deep .el-textarea__inner{
    height: 100px;
  }
}
</style>
